<template>
  <div class="hero-carousel">
    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
      <!-- 指示器 -->
      <div class="carousel-indicators">
        <button 
          v-for="(slide, index) in slides" 
          :key="index"
          type="button" 
          :data-bs-target="`#heroCarousel`"
          :data-bs-slide-to="index" 
          :class="{ active: index === 0 }"
          :aria-current="index === 0 ? 'true' : 'false'"
          :aria-label="`Slide ${index + 1}`"
        ></button>
      </div>

      <!-- 轮播内容 -->
      <div class="carousel-inner">
        <div 
          v-for="(slide, index) in slides" 
          :key="index"
          class="carousel-item"
          :class="{ active: index === 0 }"
        >
          <img 
            :src="slide.image" 
            class="d-block w-100" 
            :alt="slide.alt"
            @error="handleImageError"
          >
          <div class="carousel-caption d-none d-md-block">
            <h3>{{ slide.title }}</h3>
            <p>{{ slide.description }}</p>
          </div>
        </div>
      </div>

      <!-- 控制按钮 -->
      <button 
        class="carousel-control-prev" 
        type="button" 
        data-bs-target="#heroCarousel" 
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button 
        class="carousel-control-next" 
        type="button" 
        data-bs-target="#heroCarousel" 
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeroCarousel',
  data() {
    return {
      slides: [
        {
          image: require('@/assets/images/20220716/1657970342302153.jpg'),
          alt: '动物领养',
          title: '我只想有一个爱我的主人',
          description: '还有个温暖的家'
        },
        {
          image: require('@/assets/images/20220716/1657970367863300.jpg'),
          alt: '动物领养',
          title: '萌宠领养',
          description: '等一个暖暖的你'
        },
        {
          image: require('@/assets/images/20220716/1657970520297234.jpg'),
          alt: '动物领养',
          title: '救助流浪动物',
          description: '给它们一个温暖的家'
        }
      ]
    }
  },
  methods: {
    handleImageError(event) {
      // 如果图片加载失败，隐藏图片并显示文字
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.image-error-text')) {
        const errorText = document.createElement('div')
        errorText.className = 'image-error-text'
        errorText.style.cssText = 'display:flex;align-items:center;justify-content:center;height:500px;background:#f8f9fa;color:#666;font-size:18px;'
        errorText.textContent = '图片加载失败'
        parent.appendChild(errorText)
      }
    }
  }
}
</script>

<style scoped>
.hero-carousel {
  margin-top: -80px;
  position: relative;
  z-index: 1;
}

.carousel-item {
  height: 500px;
}

.carousel-item img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 20px;
  bottom: 50px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: 600px;
}

.carousel-caption h3 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.carousel-caption p {
  font-size: 1.2rem;
  margin-bottom: 0;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.carousel-indicators {
  bottom: 20px;
}

.carousel-indicators button {
  width: 60px;
  height: 3px;
  border-radius: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators button.active {
  background-color: #04A07B;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  color: #04A07B;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 80% 80%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-carousel {
    margin-top: -70px;
  }
  
  .carousel-item {
    height: 300px;
  }
  
  .carousel-caption {
    bottom: 20px;
    padding: 15px;
  }
  
  .carousel-caption h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .carousel-caption p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .carousel-item {
    height: 250px;
  }
  
  .carousel-caption h3 {
    font-size: 1.2rem;
  }
  
  .carousel-caption p {
    font-size: 0.9rem;
  }
}
</style>
